<template>
  <div
    class="app-infobox"
    :class="{ 'is-create': isCreate, 'is-preview': isPreview }"
    @click="handleSelect(app)">
    <template v-if="isCreate">
      <JIcon :icon="DFT_ICONS.add" />
    </template>
    <template v-else>
      <div class="app-infobox-info-wrap">
        <div
          class="app-infobox-icon"
          :style="$menuUtils.getIconStyle(app)"
        >
          <img
            v-if="$menuUtils.getIconImg(app)"
            :src="$menuUtils.getIconImg(app)"
          />
          <template v-else-if="$menuUtils.getIconFont(app)">
            <JIcon
              class="app-icon-white"
              :icon="$menuUtils.getIconFont(app)"
            />
          </template>
        </div>
        <div class="app-infobox-info">
          <h5 class="app-infobox-title" v-text="app.group_name"></h5>
          <div class="app-infobox-tip">{{ getAppUserTypeLabel(app.user_type) }}</div>
<!--          <div class="app-infobox-remark" v-text="app.group_desc"></div>-->
        </div>
        <div class="app-infobox-actions">
          <el-dropdown @command="handleCommand">
            <JIcon
              :icon="DFT_ICONS.setting"
              @click.stop
            />
            <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="edit">修改</el-dropdown-item>
<!--              <el-dropdown-item command="sync">同步到端</el-dropdown-item>-->
              <el-dropdown-item command="remove">删除</el-dropdown-item>
            </el-dropdown-menu>
            </template>
          </el-dropdown>
          <JIcon v-if="!isPreview" :icon="DFT_ICONS.arrowRight" />
        </div>
      </div>
      <div class="app-infobox-stats">
        <div class="app-infobox-stat" @click.stop="handleSelect(app, 'form')">
          <span class="app-infobox-stat-num" v-text="app.formNum"></span>
          <div class="app-infobox-stat-name">表单</div>
        </div>
        <div class="app-infobox-stat" @click.stop="handleSelect(app, 'page')">
          <span class="app-infobox-stat-num" v-text="app.pageNum"></span>
          <div class="app-infobox-stat-name">页面</div>
        </div>
        <div class="app-infobox-stat" @click.stop="handleSelect(app, 'dcomp')">
          <span class="app-infobox-stat-num" v-text="app.compNum"></span>
          <div class="app-infobox-stat-name">组件</div>
        </div>
        <div class="app-infobox-stat" @click.stop="handleSelect(app, 'report')">
          <span class="app-infobox-stat-num" v-text="app.reportNum"></span>
          <div class="app-infobox-stat-name">报表</div>
        </div>
        <div class="app-infobox-stat" @click.stop="handleSelect(app, 'microsvc')">
          <span class="app-infobox-stat-num" v-text="app.apiNum"></span>
          <div class="app-infobox-stat-name">接口</div>
        </div>
        <div class="app-infobox-stat" @click.stop="handleSelect(app, 'mb')">
          <span class="app-infobox-stat-num" v-text="app.mbNum"></span>
          <div class="app-infobox-stat-name">码表</div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import _ from 'lodash';
import { DFT_ICONS } from "@jzl/icons";
import { $menuUtils } from "@jzl/utils";

const props = defineProps({
  app: {
    type: Object,
    default: null
  },
  isCreate: {
    type: Boolean,
    default: false
  },
  isPreview: {
    type: Boolean,
    default: false
  }
});

const router = useRouter();

const getAppUserTypeLabel = (userType) => {
  let label = '共享平台用户';

  if (userType === 2) {
    label = '应用独立用户';
  } else if (userType === 3) {
    label = '共享+独立用户';
  }

  return label;
};

const handleSelect = (app, type) => {
  if (props.isCreate) {
    return emit('create');
  }
  if (!app || !app.group_id) return;
  if (props.isPreview && !type) return;
  router.push({
    name: type ? `portal-app-${type}` : `portal-app-detail`,
    params: {
      appId: _.get(app, "group_id")
    },
    replace: true
  });
};

const handleCommand = (cmd) => {
  // console.log(cmd, props.app)
  emit(cmd, props.app);
};

const emit = defineEmits(['create', 'edit', 'sync', 'remove']);
</script>

<style lang="scss">
/* 你的样式代码 */
</style>
